<template>
  <div class="canvas">
    <el-card class="box-card">
      <h2>canvas圈图并保存图片</h2>
      <div class="contentDescription">
        <h3>介绍</h3>
        <div class="content">
          &nbsp;&nbsp;&nbsp;&nbsp;通过canvas在图片上绘制矩形在将图片实现保存!
        </div>
        <h3>使用</h3>
        <div class="content">
          &nbsp;&nbsp;&nbsp;&nbsp;通过鼠标点击右键拖动绘制矩形，松开时绘制矩形图片将在右侧方框显示，点击选中矩形可对进行拖动重新选择框选区域。
          当不在已绘制矩形重新点击绘制新矩形将删除以前标记矩形。
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="contentBox">
        <div class="box" @mousedown="startMouse" @mouseup="endMouse">
          <img class='imgbox' src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
        </div>
        <div class="box2" >
          <img class='imgbox2'  :src="imgUrl" v-if="imgUrl">
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <h2>实现代码</h2>
      <div class="contentDescription">
        <div class="content" style="height: 500px;">
          <codeBlock :code="code"></codeBlock>
        </div>
        <!-- <h2>draw.js</h2>
        <div class="content" style="height: 500px;">
          <codeBlock :code="codeA"></codeBlock>
        </div> -->
      </div>
    </el-card>
    
  </div>  
</template>

<script>
import { draw } from "../../../static/js/draw";
import html2canvas from "html2canvas";
import code from "./code";
import codeBlock from '../../components/code.vue'

export default {
  name: "VuedemoCanvas",
  components: {
    codeBlock
  },
  data() {
    return {
      imgUrl: "",
      code: code.code,
      codeA: code.draw,
      cmOptions: {
        // 语言及语法模式
        mode: "text/javascript",
        // 主题
        theme: "solarized light",
        // 显示函数
        line: true,
        lineNumbers: true,
        // 软换行
        lineWrapping: true,
        // tab宽度
        tabSize: 2,
      },
    };
  },

  mounted() {
    console.log($(".box"), "666666666666");
    this.createCanvas();
    this.initCanvas();
  },

  methods: {
    save() {
      const opts = {
        width: 600,
        height: 300,
        backgroundcolor: "#FFFFFF",
        logging: true,
        useCORS: true,
      };
      let dom = $(".box")[0];
      // console.log(dom);
      html2canvas(dom, opts).then((canvas) => {
        this.imgUrl = canvas.toDataURL("image/jpeg");
        // console.log(this.imgUrl);
      });
      // console.log("save");
    },
    startMouse() {
      this.imgUrl = "";
    },
    endMouse() {
      this.save();
    },
    //创建canvas画布
    createCanvas() {
      var eleW = $(".box ").width();
      var eleH = $(".box ").height();
      var eleML = $("box ").css("margin");
      $(".box").append(
        '<canvas id="myCanvas" ref="markCanvas" style="left:0;margin:' +
          eleML +
          ";z-index:999999;position:absolute;width:" +
          eleW +
          ";height:" +
          eleH +
          '" width="' +
          eleW +
          '" height="' +
          eleH +
          '" class="">\n' +
          "      Your browser does not support the HTML5 canvas tag.\n" +
          "    </canvas>"
      );
      return $(".box ")[0].src;
    },
    /* 画布初始化 */
    initCanvas() {
      let list = [];
      this.$nextTick(() => {
        //cav-画布对象
        // list-矩形数组
        let cav = $("#myCanvas")[0];
        let ctx = cav.getContext("2d");
        ctx.strokeStyle = "red";
        ctx.lineWidth = 5;
        draw(cav, list);
        // 备注: js中对象操作指向的是对象的物理地址, 获取绘制完矩形的结果数组直接取用或处理this.markList即可
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  margin: 0 auto;
  width: 100%;
  height: 360px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  .box {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 0 20px;
    // padding: 100px;
    .imgbox {
      position: relative;
      width: 100%;
      height: 100%;
      user-select: none;
      // margin: 100px;
      // padding: 10px;
    }
  }
  .box2 {
    border: 1px solid #928c8c;
    width: 600px;
    height: 300px;
  }
  .imgbox2 {
    width: 600px;
    height: 300px;
    user-select: none;
    // margin: 100px;
    // padding: 10px;
  }
}
.canvas {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  .contentDescription {
    margin-left: 50px;
    .content {
      margin-left: 20px;
    }
  }
}
.box-card {
  width: 80%;
  margin-bottom: 20px;
}
</style>
<style >
.CodeMirror-scroll{
  background-color: #f6f8fa !important;
  height: 500px;
}
.CodeMirror {
  height: 500px;
  overflow-y: hidden;
  background-color: #f6f8fa !important;
}
.code-box{
  height: 100%;
  overflow: auto;
}
</style>